<template>
	<!-- :style="{ height:TABLE_SCROLL_HEIGHT +'px' }" -->
	<div class="item_list" >
		<div v-for="item,index in waitList" :key="index" class="item_box" :style="{ border:setBor(item.status) }">
			<div class="status_box">进行中</div>
			<div class="item_list_left">
				<a-avatar shape="square">
				    <template #icon>
						{{item.userName}}
					</template>
				</a-avatar>
			</div>
			<div class="item_list_right">
				<p>{{item.userName}}</p>
				<div class="user_item over-hie">
					<p v-for="itm in item.userItemRecordVoList" :key="itm.itemId" @click="onTest(item,itm)" >
						<span>{{itm.itemName || '无'}}</span>
						<span>jinxingzhog</span>
					</p>
				</div>
			</div>
		</div>
	</div>
	<a-empty v-if='waitList.length == 0' />
</template>

<script lang="ts" setup>
	import { computed , watch, ref } from "vue";
	import {useRouter,useRoute} from 'vue-router';
	import { useWorkBenches, useWebstock } from '@/store';
	import message from "@/utils/message";
	import useGetTableScrollHeight from "@/utils/useGetTableScrollHeight";
	
	const ROUTER = useRouter();
	const Workben = useWorkBenches();
	const webstockStore = useWebstock();
	
	const TABLE_SCROLL_HEIGHT = useGetTableScrollHeight('','.work_mind');
	const isRouter = computed(()=> Workben.$state.isRouter);
	
	defineProps({
		waitList: {
			type: Array,
			default() {
				return [];
			},
		},
	});
	
	function setBor(status){
		if(status == 3) return '2px solid #f69c55'
	}
	const row = ref({});
	
	const onTest = async (frow,record)=>{
		// const res = await webstockStore.sendMessage({ messageCode:'2',userId: 1 });
		// console.log(row);
		// 
		if(!frow.isOnLine) return message.warning("当前用户不在线，不可测评");
		const { id, itemId } = record;
		row.value = record;
		await webstockStore.sendMessage({ messageCode:'1',userId: localStorage.getItem('currentId'), userItemRecordId:id,itemId  });
		// if(isRouter.value){
		// 	ROUTER.push({name: 'answerPage',params:{ id:row.itemId }});
		// }
		
	};
	
	watch(()=>isRouter.value,()=>{
		if(isRouter.value){
			ROUTER.push({name: 'answerPage',params:{ id:row.value.itemId }});
		}
	},{ deep:true,immediate:true });
</script>

<style lang="less" scoped>
	.item_list{
		display:flex;
		justify-content: space-between;
		flex-wrap: wrap;
		// font-size: 15px;
		.item_box{
			background: linear-gradient(180deg, #FFFFFF 0%, rgba(209,255,239,0.20) 220%);
			border: 1px solid rgba(19, 206, 143, 0.5);
			box-shadow: 2px 2px 10px 2px rgba(19, 206, 143, 0.1);
			border-radius: 6px;
			width: 335px;
			height: 144px;
			padding: 20px;
			display:flex;
			position: relative;
			.item_list_left{
				margin-right: 10px;
				flex:1;
			}
			.item_list_right{
				flex:2;
			}
		}
	}
	.ant-avatar{
		height: 100%;width:100%;
		background-color: #01c686;color:#fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.item_list_right{
		color: #535353;
		>p{
			font-size: 16px;
			padding-bottom: 5px;
			border-bottom: 1px dashed #83E6C5;
		}
	}
	.user_item{
		font-size: 14px;
		>p{
			display: flex;
			justify-content: space-between;
			margin-bottom: 5px;
			cursor: pointer;
		}
	}
	.status_box{
		position: absolute;
		right: 0;
		top:0;
		color: @white;
		padding: 3px 10px;
		font-size: 12px;
		background-image: url("../../../assets/image/work/jin.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		// box-shadow: 2px 2px 10px 2px rgba(19, 206, 143, 0.1);
		// border: 1px solid rgba(19, 206, 143, 0.5);
		// background: linear-gradient(180deg, #FFFFFF 0%, rgba(209,255,239,0.20) 220%);
	}
</style>